
// react
import React, { useEffect } from "react";
// lib
import { Modal, Form, Input} from "antd";
// components & widget
// config
import { MODULE_NAME } from "./config";
import { MODAL_STYLE } from "project/config";
import {
  INPUT_REQUIRED_RULE,
  MOBILE_LENGTH_RULE,
  NAME_LENGTH_RULE,
  PWD_LONG_LENGTH_RULE,
} from "project/validRules";
// import FormItemUploader from "components/Form/FormItemUploader";
// import { ADMIN_STATUS_OPTION } from "project/constant";
// store
import { observer } from "mobx-react";
import { state } from "./state";
// controller
import { addAdmin, updateAdmin } from "./controller";
// import { createFormFileList } from "biz/File/logic";
import { verifyMobile } from "utils/validator";

function EditModal() {
  const [form] = Form.useForm();
  const show = state.editModalShow;
  const info = state.editInfo;
  const title = `${state.editInfo ? "修改" : "新增"}${MODULE_NAME}`;

  const handleCancel = () => {
    state.editModal = false;
  };

  const handleOk = async () => {
    const result = await form.validateFields();
    if (info) {
      updateAdmin(result, info.userId);
    } else {
      addAdmin(result);
    }
  };

  useEffect(() => {
    if (show) {
      form.resetFields();
    }
    if (info) {
      form.setFieldsValue({
        ...info,
      });
    }
    return () => {
      form.resetFields();
    };
  }, [form, show, info]);

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      destroyOnClose
      width={MODAL_STYLE.COL1}
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
      <Form {...MODAL_STYLE.FORM_6_18} form={form}>
        {/* <Row gutter={MODAL_STYLE.FORM_ROW_GUTTER}> */}
            <Form.Item
              name="userName"
              label="账号"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input />
            </Form.Item>
          {!info && (
              <Form.Item
                name="password"
                label="密码"
                // extra="最少8位，至少包含数字、小写字母、大写字母中的两种"
                rules={[INPUT_REQUIRED_RULE, PWD_LONG_LENGTH_RULE]}
              >
                <Input.Password
                  placeholder="密码"
                  minLength={PWD_LONG_LENGTH_RULE.min}
                  maxLength={PWD_LONG_LENGTH_RULE.max}
                />
              </Form.Item>
          )}
            <Form.Item
              name="fullName"
              label="用户姓名"
              rules={[INPUT_REQUIRED_RULE, NAME_LENGTH_RULE]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="phone"
              label="用户手机"
              rules={[
                INPUT_REQUIRED_RULE,
                MOBILE_LENGTH_RULE,
                { validator: (rule, val) => verifyMobile(rule, val) },
              ]}
            >
              <Input />
            </Form.Item>
            {/* <Form.Item name="state" label="状态" rules={[INPUT_REQUIRED_RULE]}>
              <Radio.Group>
                {ADMIN_STATUS_OPTION.map((el: any) => (
                  <Radio key={Number(el.code)} value={el.code}>
                    {el.name}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item> */}
        {/* </Row> */}
      </Form>
    </Modal>
  );
}

export default observer(EditModal);
